@use 'animate.css' as *;
@use '../SVisibilityDetail/style' as *;

@mixin s-animate-css-delay($multiple) {
  -webkit-animation-delay: calc(1s * $multiple);
  animation-delay: calc(1s * $multiple);
  -webkit-animation-delay: calc(var(--animate-delay) * $multiple);
  animation-delay: calc(var(--animate-delay) * $multiple);
}

@mixin s-animate-css-repeat($multiple) {
  -webkit-animation-iteration-count: calc(1 * $multiple);
  animation-iteration-count: calc(1 * $multiple);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * $multiple);
  animation-iteration-count: calc(var(--animate-repeat) * $multiple);
}

.s-animate-css {
  &.animate__delay-500ms {
    @include s-animate-css-delay(0.5);
  }

  &.animate__delay-1500ms {
    @include s-animate-css-delay(1.5);
  }

  &.animate__delay-2500ms {
    @include s-animate-css-delay(2.5);
  }

  &.animate__delay-3500ms {
    @include s-animate-css-delay(3.5);
  }

  &.animate__delay-4500ms {
    @include s-animate-css-delay(4.5);
  }

  &.animate__repeat-4 {
    @include s-animate-css-repeat(4);
  }

  &.animate__repeat-5 {
    @include s-animate-css-repeat(5);
  }
}
